<template>
  <div class="com-rep-main h-full">
    <a-row class="h-full">
      <a-col span="6" class="h-full">
        <div class="com-rep-main-left p-[20px_20px_0_0] h-full">
          <div class="flex justify-between align-center" style="align-items: center;">
            <div class="asset-title">文件列表</div>
            <div class="update-icon">
              <a-upload action="/">
                <template #upload-button>
                  <icon-plus />
                </template>
              </a-upload>
            </div>
          </div>
          <!-- 文件列表 -->
          <div class="file-list mt-[20px]">
            <FileList v-model=list @viewFile="viewFile" />
          </div>
        </div>
      </a-col>
      <a-col span="18" style="height: calc(100vh - 170px);overflow: auto;">
        <!-- 文件查看 -->
        <vue-office-docx :src="docx" class="view-h" @rendered="renderedHandler" @error="errorHandler" v-if="isDocx" />
        <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" v-if="isPdf" class="view-h"/>
        <vue-office-excel :src="excel" class="view-h" @rendered="renderedHandler" @error="errorHandler"
          v-if="isExcel" />
        <img :src="imgUrl" v-if="isImg" />
        <div class="show-default" v-if="!isDocx && !isPdf && !isExcel && !isImg">
          <img src="@/assets/images/registerManage/empty.png" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import VueOfficeDocx from '@vue-office/docx';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeExcel from '@vue-office/excel';
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';
import '@vue-office/docx/lib/index.css';
import conf from '@/config/config';

import FileList from '@/views/compliance_registration/components/file_list.vue';

import { fileList } from './values';

const list = ref(fileList);

const docx = ref('');
const excel = ref('');
const pdf = ref('');
const imgUrl = ref('');
const isDocx = ref(false);
const isExcel = ref(false);
const isPdf = ref(false);
const isImg = ref(false);

/* 文件预览地址 */
const ViewUrl = computed(() => {
  return `${conf.getServerUrl()}/api/asset_registration/file/v2/download?file_info=`;
});

const fileTypes = {
  '.xlsx': { variable: excel, flag: isExcel },
  '.docx': { variable: docx, flag: isDocx },
  '.pdf': { variable: pdf, flag: isPdf },
  default: { variable: imgUrl, flag: isImg },
};
/* 查看选择文件 */
const viewFile = (i: any) => {
  const file_info = list.value[i - 1].file_info;
  const url = `${ViewUrl.value}${file_info}`;
  let fileType = Object.keys(fileTypes).find((ext) => file_info.endsWith(ext));
  if (!fileType) {
    fileType = 'default';
  }
  const { variable, flag } = fileTypes[fileType];
  variable.value = url;
  flag.value = true;
  Object.entries(fileTypes).forEach(([ext, { flag }]) => {
    if (ext !== fileType) {
      flag.value = false;
    }
  });
};

const renderedHandler = () => {
  console.log('渲染完成');
};
const errorHandler = () => {
  console.log('渲染失败');
};

</script>

<style lang="less" scope>
@import "../index.less";

.show-default {
  text-align: center;
  margin-top: calc((100vh - 380px) / 2);

  img {
    width: 80px;
    height: 108px;
    margin: 0 auto;
  }
}

.view-h {
  height: calc(100vh - 300px);
}
</style>